<template>
  <a-card size="small" :bordered="false" title="在线用户">
    <a-form v-if="showSearch" layout="inline" :model="params" @submit="handleLoadData">
      <a-form-item label="用户名">
        <a-input v-model:value="params.username" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="IP地址">
        <a-input v-model:value="params.ipaddr" placeholder="请输入IP地址" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" :loading="loading" html-type="submit">
          <template #icon><SearchOutlined /></template>
          <span v-if="!loading">搜索</span>
          <span v-else>搜索中...</span>
        </a-button>
      </a-form-item>
    </a-form>
    <table-toolbar
      v-model:show-search="showSearch"
      v-model:columns="tableColumns"
      style="margin-top: 10px"
      @reload="handleLoadData"
    >
    </table-toolbar>

    <a-table :loading="loading" :columns="tableColumns" :data-source="tableDataSource" row-key="token" size="middle">
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'serialId'">
          {{ index + 1 }}
        </template>
        <template v-else-if="column.key === 'userType'">
          <a-tag :color="record.userType.color">{{ record.userType.label }}</a-tag>
        </template>
        <template v-else-if="column.key === 'action'">
          <a-popconfirm
            title="确定强退该用户吗?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleForceLogout(record.token)"
          >
            <a-button type="primary" danger size="small">
              <template #icon><DeleteOutlined /></template>
              强退
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script name="MonitorOnline" lang="ts" setup>
import { forceLogout, getList } from "@/api/monitor/online";

const loading = ref<boolean>(true);

const showSearch = ref<boolean>(true);
const params = reactive({
  username: "",
  ipaddr: ""
});
const tableColumns = ref<TableColumn[]>([
  {
    key: "serialId",
    dataIndex: "serialId",
    title: "序号"
  },
  {
    key: "token",
    dataIndex: "token",
    title: "会话编号"
  },
  {
    key: "userType",
    dataIndex: "userType",
    title: "用户类型"
  },
  {
    key: "username",
    dataIndex: "username",
    title: "用户名"
  },
  {
    key: "ipaddr",
    dataIndex: "ipaddr",
    title: " 登录IP"
  },
  {
    key: "browser",
    dataIndex: "browser",
    title: "浏览器类型",
    visible: false
  },
  {
    key: "os",
    dataIndex: "os",
    title: "操作系统",
    visible: false
  },
  {
    key: "loginTime",
    dataIndex: "loginTime",
    title: "登录时间"
  },
  {
    key: "action",
    title: "操作",
    fixed: "right"
  }
]);
const tableDataSource = ref([]);
const handleLoadData = () => {
  loading.value = true;
  getList(params)
    .then(response => {
      tableDataSource.value = response.data;
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleForceLogout = (id: number) => {
  loading.value = true;
  forceLogout(id)
    .then(() => {
      handleLoadData();
      antdMessage.success("强退成功");
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleLoadData();
});
</script>
